﻿@inject DataSource Data

<FluentDataGrid Items="@Data.People" style="width: 600px;" RowSize="@DataGridRowSize.Medium">
    <TemplateColumn Title="Person" SortBy="@sortByName">
        <div class="flex items-center">
            <img class="flag" src="_content/FluentUI.Demo.Shared/flags/@(context.CountryCode.ToLower()).svg" alt="Flag of @(context.CountryCode)" />
            <nobr>
                <strong>@context.LastName</strong>, @context.FirstName
            </nobr>
        </div>
    </TemplateColumn>
    <TemplateColumn Title="Bonus">
        <FluentButton Appearance="Appearance.Accent" @onclick="@(() => Bonus(context))">Regular</FluentButton>
        <FluentButton Appearance="Appearance.Accent" @onclick="@(() => DoubleBonus(context))">Double</FluentButton>
    </TemplateColumn>
</FluentDataGrid>


<p><strong>@message</strong></p>

@code {
    string message = string.Empty;

    GridSort<Person> sortByName = GridSort<Person>
        .ByAscending(p => p.LastName)
        .ThenAscending(p => p.FirstName);

    void Bonus(Person p) => message = $"You want to give {p.FirstName} {p.LastName} a regular bonus";

    void DoubleBonus(Person p) => message = $"You want to give {p.FirstName} {p.LastName} a double bonus";
}
